<template>
	<!-- 主容器，采用垂直布局 -->
	<view class="container">
		<!-- 顶部标题区域 -->
		<view class="header">
			<text class="title">选择车队</text>
			<view><text class="subtitle">提示：专属业务，仅被指定分组的车辆可以接单</text></view>
		</view>

		<!-- 可滚动的车队列表区域 -->
		<scroll-view scroll-y="true" class="team-list">
			<!-- 复选框组，用于管理车队选择状态 -->
			<checkbox-group @change="handleTeamSelect">
				<!-- 循环渲染每个车队项 -->
				<label class="team-item" v-for="team in teamList" :key="team.id">
					<view class="team-info">
						<!-- 车队图标 -->
						<image src="../../../static/chedui/car.png"></image>
						<!-- 车队详细信息 -->
						<view class="team-details">
							<text class="team-name">{{team.username}}的{{team.teamName}}</text>
							<text class="team-count">{{team.teamNumber}}辆车</text>
						</view>
						<!-- 选择框 -->
						<checkbox :value="String(team.id)" :checked="team.checked" />
					</view>
				</label>
			</checkbox-group>
		</scroll-view>

		<!-- 底部操作栏 -->
		<view class="footer">
			<!-- 已选择数量显示 -->
			<view class="selection-info">
				<text>已选{{selectedCount}}个车队</text>
			</view>
			<!-- 操作按钮组 -->
			<view class="action-buttons">
				<!-- 全选/取消全选按钮 -->
				<view class="select-all-btn" @click="toggleSelectAll">{{isAllSelected ? '取消全选' : '全选'}}</view>
				<!-- 确认按钮 -->
				<button class="confirm-btn" @click="goBack" :disabled="selectedCount == 0">确定</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	// 引入Vue响应式API
	import {
		ref,
		computed
	} from 'vue'
	// 引入uni-app生命周期钩子
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app'
	// 引入HTTP请求工具
	import {
		http
	} from '@/config/request.js'
	import "@/config/request.js";
	// 车队列表响应式数据，初始结构
	const teamList = ref([{
		id: '',
		leader: '',
		number: '',
		carCount: '',
		checked: false // 初始未选中
	}])

	// 全选状态
	const isAllSelected = ref(false)

	// 异步获取车队数据
	const cha = async () => {
		try {
			// 发送GET请求获取车队列表
			const response = await http({
				url: '/team/selectAll',
				method: 'GET'
			})

			// 处理响应数据，映射到本地数据结构
			teamList.value = (response.shuju || []).map(item => ({
				...item, // 展开原有属性
				id: String(item.id), // 确保ID为字符串类型
				checked: false // 初始化为未选中状态
			}))

		} catch (error) {
			console.error('获取车队列表失败:', error)
			teamList.value = [] // 出错时设置为空数组
		}
	}

	//已选车队数量
	const selectedCount = computed(() => {
		return teamList.value.filter(team => team.checked).length
	})

	// 处理车队选择变化事件
	const handleTeamSelect = (e) => {
		// 创建选中车队ID集合(转为字符串)
		const selectedIds = new Set(e.detail.value.map(String))

		// 更新每个车队的选中状态
		teamList.value = teamList.value.map(team => {
			return {
				...team,
				checked: selectedIds.has(String(team.id)) // 检查是否在选中集合中
			}
		})
		// 检查是否全部选中
		checkAllSelected()
	}

	// 切换全选/取消全选
	const toggleSelectAll = () => {
		isAllSelected.value = !isAllSelected.value // 切换状态
		// 更新所有车队的选中状态
		teamList.value.forEach(team => {
			team.checked = isAllSelected.value
		})
	}

	// 检查是否所有车队都被选中
	const checkAllSelected = () => {
		isAllSelected.value = teamList.value.every(team => team.checked)
	}

	// 确认按钮点击处理
	const goBack = () => {
		// 获取选中的车队
		const selectedTeams = teamList.value.filter(team => team.checked)

		// 验证至少选择了一个车队
		if (selectedTeams.length === 0) {
			uni.showToast({
				title: '请至少选择1个车队',
				icon: 'none'
			})
			return // 未选择时不继续执行
		} else if (selectedTeams.length < 10) {
			// 显示成功提示
			uni.showToast({
				title: `已选择${selectedTeams.length}个车队`,
				icon: 'success'
			})
			uni.setStorageSync('chedui', selectedTeams)
			//返回上一页
			uni.navigateBack({
				delta: 1,
			});

			//选中的车队信息
			console.log('选中的车队:', selectedTeams)
		} else {
			//选择的车队不能超过10个
			uni.showToast({
				title: `选择车队的数量在1-10之间`,
				icon: 'success'
			})
		}
	}

	// 页面准备就绪时加载车队数据
	onReady(() => {
		cha()
	})
</script>

<style lang="scss">
	/* 页面基础样式 */
	page {
		background-color: #f5f5f5;
		/* 浅灰色背景 */
	}

	/* 主容器样式 */
	.container {
		display: flex;
		flex-direction: column;
		/* 垂直布局 */
		height: 100vh;
		/* 视口高度 */
		background-color: #002fa7;
		/* 深蓝色背景 */
	}

	/* 头部样式 */
	.header {
		height: 80rpx;
		width: 100%;
		padding: 40rpx 0 30rpx;
		background-color: #002fa7;
		/* 深蓝色背景 */
		margin-left: 0px;
	}

	/* 主标题样式 */
	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #ffffff;
		/* 白色文字 */
		line-height: 50rpx;
		margin-left: 52rpx;
	}

	/* 副标题样式 */
	.subtitle {
		margin-left: 53rpx;
		font-size: 24rpx;
		color: #ffffff;
		/* 白色文字 */
		line-height: 40rpx;
	}

	/* 车队列表容器 */
	.team-list {
		flex: 1;
		/* 占据剩余空间 */
		background-color: #f5f5f5;
		/* 浅灰色背景 */
		border-radius: 25rpx 25rpx 0 0;
		/* 顶部圆角 */
	}

	/* 单个车队项样式 */
	.team-item {
		display: block;
		padding: 25rpx 0;
		width: 93%;
		height: 60%;
		border-radius: 30rpx;
		/* 圆角 */
		margin-top: 20rpx;
		margin-left: 30rpx;
		background-color: #ffffff;
		/* 白色背景 */
	}

	/* 车队图标样式 */
	.team-item image {
		margin-left: 30rpx;
	}

	/* 车队信息布局 */
	.team-info {
		display: flex;
		align-items: center;
		/* 垂直居中 */
	}

	/* 车队图标尺寸 */
	.team-info image {
		width: 50rpx;
		height: 50rpx;
	}

	/* 车队详细信息区域 */
	.team-details {
		flex: 1;
		/* 占据剩余空间 */
		margin-left: 20rpx;
	}

	/* 车队名称样式 */
	.team-name {
		font-size: 30rpx;
		color: #333;
		/* 深灰色文字 */
		display: block;
		line-height: 45rpx;
	}

	/* 车队车辆数量样式 */
	.team-count {
		font-size: 24rpx;
		color: #999;
		/* 浅灰色文字 */
		display: block;
		line-height: 35rpx;
	}

	/* 底部样式 */
	.footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		/* 两端对齐 */
		padding: 15rpx 30rpx;
		background-color: #fff;
		/* 白色背景 */
		border-top: 1rpx solid #eee;
		/* 顶部边框 */
	}

	/* 选择信息文字样式 */
	.selection-info {
		font-size: 28rpx;
		color: #666;
		/* 中灰色文字 */
	}

	/* 操作按钮容器 */
	.action-buttons {
		display: flex;
	}

	/* 全选按钮样式 */
	.select-all-btn {
		margin-right: 20rpx;
		color: #002fa7;
		/* 深蓝色文字 */
		font-size: 28rpx;
		height: 70rpx;
		line-height: 70rpx;
		padding: 0 50rpx;
	}

	/* 确认按钮样式 */
	.confirm-btn {
		background-color: #002fa7;
		/* 深蓝色背景 */
		color: white;
		/* 白色文字 */
		font-size: 28rpx;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 20rpx;
		/* 圆角 */
		padding: 0 40rpx;

		//确认按钮禁用状态
		&[disabled] {
			background-color: #9d9d9d;
			color: #999999;
			opacity: 0.7;
		}
	}


	/* 复选框样式调整 */
	checkbox {
		margin-right: 20rpx;
	}

	/* 复选框基础样式 */
	checkbox .wx-checkbox-input {
		width: 30rpx;
		height: 30rpx;
	}

	/* 复选框选中状态样式 */
	checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		background: #002fa7;
		/* 深蓝色背景 */
		border-color: #002fa7;
	}

	/* 复选框选中标记样式 */
	checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
		font-size: 28rpx;
		color: white;
		/* 白色对勾 */
	}
</style>